<template>
  <div class="factory">
		<Header :title="factory.name"/>
		<PatchBox :list="topList"/>
		<div class="content">
			<aside class="aside-box aside-left">
				<Moudle title="生产成本分析">
					<div class="relative">
						<AsideBG title="今日"/>
						<Echarts :options="echarts[2]"/>
					</div>
					<div class="relative">
						<AsideBG title="近一周"/>
						<Echarts class="h15" type="line" :options="echarts[3]"/>
					</div>
				</Moudle>
				<Moudle title="成品率">
					<div class="relative">
						<AsideBG title="今日"/>
						<Echarts :options="yieId"/>
					</div>
					<div class="relative">
						<AsideBG title="近一周"/>
						<Echarts class="h12" type="line" :options="echarts[1]"/>
					</div>
				</Moudle>
				<Moudle title="各车间机组数量">
					<div class="fz2" v-for="item in factory.workshops" :key="item.id">
						<router-link :to="{name: 'Workshop', params:{workshopId: item.id}}">
							{{item.title}}
						</router-link>
						<span>: {{item.jizuNum}}</span>
					</div>
				</Moudle>
			</aside>
			<div class="center-box">
				<MySwiper class="map-box" :list="swiperList"/>
				<Moudle title="计划完成情况">
					<div class="relative ib w2">
						<AsideBG title="今日"/>
						<Echarts :options="echarts[4]"/>
					</div>
					<div class="relative ib w8">
						<AsideBG title="近一周" :right="true"/>
						<Echarts class="h15" type="bar" :options="echarts[5]"/>
					</div>
				</Moudle>
			</div>
			<aside class="aside-box aside-right">
				<Moudle title="近一周 日产能">
					<Echarts class="h15" type="line" :options="echarts[6]"/>
				</Moudle>
				<Moudle title="产品库存">
					<div class="list-item" v-for="v in products" :key="v.type">
						{{v.name}}:{{v.num}}{{v.unit}}
					</div>
				</Moudle>
				<Moudle title="产品完工情况">
					<table class="table">
						<thead>
							<td>商品名称</td>
							<td>商品数量</td>
							<td>完成率</td>
							<td>未包装数量</td>
						</thead>
						<tr v-for="v in 5" :key="v">
							<td>商品1</td>
							<td>3</td>
							<td>50%</td>
							<td>50%</td>
						</tr>
					</table>
				</Moudle>
			</aside>
		</div>
  </div>
</template>

<script>
import {dataMaper} from '../mock/data/maper.js'
import {mapState} from 'vuex'
export default {
  name: 'Factory',
	data(){
		return{
			workshopId: 1,
			swiperList: [
				require('../assets/images/banner/1.png'),
				require('../assets/images/banner/2.png'),
				require('../assets/images/banner/3.png')
			],
			echarts: [],
			products: [],
			topList: [],
			
			yieId:{}
		}
	},
	computed:{
		...mapState(['factorys']),
		weekDays(){
			return this.$store.getters.weekDays;
		},
		factoryId(){
			return this.$route.params.factoryId;
		},
		factory(){
			if(!this.factorys.length) return {};
			return this.factorys.find((v) => v.id == this.factoryId);
		}
	},
	watch:{
		// 根据工厂信息的刷新，设置图表数据
		factory(val){
			this.products = val.myProducts;
			this.getTopData();
			this.initEcharts();
			this.$nextTick(() => {
				this.setEcharts(val);
			})
		}
	},
	methods:{
		getTopData(){
			let arr = [],
					keys = ['workshopSum', 'jizuNum', 'jdlNum', 'totalNum', 'monthNum', 'todayNum'];
			keys.forEach((key) => {
				let {title, unit, type} = dataMaper[key];
				arr.push({title, value: this.factory[key] + unit, type});
			})
			this.topList = arr;
		},
		initEcharts(){
			let xAxis = {data: this.weekDays},
					yAxis = {max: 100},
					series = [{
						areaStyle: {
							color: {
								type: 'linear',
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: '#2dffff'
								}, {
									offset: 1, color: '#2d9fff'
								}]
							}
						}
					}];
			
			this.yieId = {};
			this.echarts[1] = {
				xAxis,
				yAxis,
				series,
				tooltip: {
					formatter: '{c}%'
				},
				grid:{
					left: '10%'
				}
			}
			this.echarts[2] = {
				series:[{
					data: [
						{name: "原材料"},
						{name: "电能耗"},
						{name: "水能耗"}
					]
				}],
				formatter: '{c}吨'
			}
			this.echarts[3] = {
				series:[{
					type: 'line',
					name: '原材料',
					smooth: true
				},{
					type: 'line',
					name: '电能耗',
					smooth: true
				},{
					type: 'line',
					name: '水能耗',
					smooth: true
				}],
				yAxis: {
					axisLabel: {
						formatter:'{value} 吨'
					}
				},
				xAxis,
				tooltip: {
					trigger: 'axis',
					formatter: ''
				},
				legend: {
					left: 'left',
					top: -5,
					textStyle:{
						color: '#fff'
					}
				},
				grid:{
					top: '20%',
					left: '5%'
				}
			}
			this.echarts[4] = {
				series: [{
					radius: '100%'
				}]
			}
			this.echarts[5] = {
				xAxis,
				yAxis
			}
			this.echarts[6] = {
				xAxis,
				tooltip:{
					formatter: '{c}吨'
				}
			}
		},
		setEcharts(val){
			this.yieId = {
				series:[{
					data: val.yieId
				}]
			}
			this.echarts[1] = {
				series:[{
					data: val.yieIdWeek
				}]
			}
			this.echarts[2] = {
				series:[{
					data: [
						{name: "原材料", value: val.cost.material},
						{name: "电能耗", value: val.cost.electric},
						{name: "水能耗", value: val.cost.water}
					]
				}]
			}
			this.echarts[3] = {
				series:[{
					data: val.costWeek.material
				},{
					data: val.costWeek.electric
				},{
					data: val.costWeek.water
				}]
			}
			this.echarts[4] = {
				series:[{
					data: [
						{name: "完成率", value: val.complete[0]},
						{name: "未完成", value: val.complete[1]}
					]
				}]
			}
			this.echarts[5] = {
				series:[{
					data: val.completeWeek
				}]
			}
			this.echarts[6] = {
				series:[{
					data: val.weekNum
				}]
			}
		}
	},
	components: {
		PatchBox: () => import('@/components/global/PatchBox')
	},
	created() {
		this.$store.dispatch('request', {url: '/mock/factorys', name: 'factorys'});
	}
}
</script>

<style scoped lang="less">
.list-item{
	font-size: 2vh;
	line-height: 3.2vh;
}
.table{
	width: 100%;
	font-size: 1.8vh;
}
</style>